<template>
  <div id="view-article">
    <div class="text">
      <div class="head">
        <h1 class="title">{{ artDetail.title }}</h1>
        <div class="desc f14">{{ artDetail.description }}</div>
        <div class="author">{{ artDetail.user_name }}</div>
      </div>
      <div class="content">
        <div class="left"></div>
        <div class="richText" v-html="artDetail.content"></div>
        <div class="right"></div>
      </div>
      <div class="foot"></div>
    </div>
    <div class="background"></div>
  </div>
</template>

<script>
import { getArtByIdApi } from '@/api/article'
export default {
  name: 'view-article',
  data() {
    return {
      artId: null,
      artDetail: {}
    }
  },
  mounted() {
    this.getQueryData()
    this.getArtDetail()
  },
  methods: {
    getQueryData() {
      this.artId = this.$route.query.art_id
    },
    getArtDetail() {
      getArtByIdApi({ id: this.artId }).then(res => {
        this.artDetail = res.data
      })
    }
  }
}
</script>

<style lang="scss">
#view-article {
  height: 100%;

  .background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center right;
    mask-image: linear-gradient(90deg, #000, transparent 15%, transparent 85%, #000);
    mask-repeat: no-repeat;
    mask-position: right;
    mask-size: 100% 100%;
    border-radius: 8px;
    // background-image: url("http://localhost:9090/common/download/img?name=948a3f17-a2c3-49ae-9c92-6af96db1267e.jpg");
  }
  .richText p {
    word-wrap: break-word;
    word-break: break-all;
  }
  .text {
    height: 100%;

    .head {
      max-width: 80%;
      height: 100px;
      margin: 0 auto;
      background-color: #fff;
      padding: 0 20px;
    }

    .content {
      max-width: 80%;
      min-height: calc(100% - 100px);
      margin: 0 auto;
      padding: 0 20px;
      background-color: #fff;

      .richText {
        p {
          img {
            width: 100% !important;
          }
        }
      }
    }
  }
}</style>